<template>
  <div class="bottom">
    <div class="bottom-foot">
      <router-link  to="/" :class="{'bottom-foot-curr': isScenery}"><i class="iconfont bottom-foot-icon" >&#xe6e4;</i>景点</router-link >
      <router-link  to="/hotel" :class="{'bottom-foot-curr': isHotel}"><i class="iconfont bottom-foot-icon">&#xe66d;</i>酒店</router-link >
      <router-link  to="/car" :class="{'bottom-foot-curr': isCar}"><i class="iconfont bottom-foot-icon">&#xe6e3;</i>专车</router-link >
      <router-link  to="/mine" :class="{'bottom-foot-curr': isMine}"><i class="iconfont bottom-foot-icon">&#xe6b8;</i>我的</router-link >
    </div>
  </div>
</template>

<script>
  export default {
    name: 'hello',
    components:{

    },
    methods:{

    },
    mounted: function () {
      this.$nextTick(function () {
        var uri = this.$route.path;
        if (uri === '/') {
          this.isScenery   = true;
          this.isHotel   = false;
          this.isCar = false;
          this.isMine = false;
        }
        if (uri === '/hotel') {
          this.isScenery   = false;
          this.isHotel   = true;
          this.isCar = false;
          this.isMine = false;
        }
        if (uri === '/car') {
          this.isScenery   = false;
          this.isHotel   = false;
          this.isCar = true;
          this.isMine = false;
        }
        if (uri === '/mine') {
          this.isScenery   = false;
          this.isHotel   = false;
          this.isCar = false;
          this.isMine = true;
        }
      })
    },
    data () {
      return {
        isScenery : true,
        isHotel : false,
        isCar : false,
        isMine : false
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../commomCss/comomCss";
  .bottom{
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: #f8f8f8;
    height: inherit;
    .bottom-foot{
      margin: torem(10px) 0;
      .bottom-foot-curr{
        color : #06c1ae;
      }
      a{
        float: left;
        display: block;
        text-decoration: none;
        width: 25%;
        text-align: center;
        color: #666;
        font-size: torem(14px);
        .bottom-foot-icon{
          display: block;
          font-size: torem(20px);
        }

      }
    }
  }
</style>
